<template>
  <div class="Wrapper">
    <div class="content">
      <div class="PassBox">
        <p class="title">找回密码</p>
        <div class="passForm">
          <div class="list">
            <div class="listNum">中国 +86</div>
            <div class="listInput">
              <input type="text" maxlength="11" v-model="phone" class="inputTxt" :class="{ Warn: phoneLose }"
                placeholder="请输入手机号码" @input="verify_phone" @blur="verify_phone" />
            </div>
            <p class="warn_tip" v-if="phoneLose">{{ warn_tip }}</p>
          </div>

          <div class="list">
            <div class="listInput">
              <input type="text" maxlength="6" v-model="code" :class="{ Warn: codeLose }" class="inputTxt"
                placeholder="输入短信验证码" />
              <span class="sendCode" :class="{ codesturt: codesturt }" @click="getCode">{{
                codeText
              }}</span>
            </div>
            <p class="warn_tip" v-if="codeLose">{{ warn_tip }}</p>
          </div>

          <div class="list">
            <div class="listInput">
              <input :type="islook ? 'text' : 'password'" class="inputTxt" v-model="password" placeholder="设置密码（6-16位）"
                :class="{ Warn: passLose }" @input="verify_pass" @blur="verify_pass" />
              <span class="iconfont islook" :class="islook ? 'icon-yanjing1' : 'icon-Close'"
                @click="changeLookPass"></span>
            </div>
            <p class="warn_tip" v-if="passLose">{{ warn_tip }}</p>
          </div>
          <p class="error_tip">{{ error_tip }}</p>
          <button class="submit" :class="{ btn_primary_agree: isoK }" @click="editPass">
            确认修改
          </button>
        </div>
      </div>
      <div class="toLogin">
        <span class="havaAcc">已有账号?</span>
        <router-link to="/login">
          <span class="Tos">登录</span>
        </router-link>
      </div>
    </div>
  </div>
</template>

<script setup>
import Http from '@/utils/http';
import { sendCode } from '@/utils/Api';
import { debounce, validatePhone } from '@/utils/utils';
import { useMainStore } from '@/stores/useMain';

const mainStore = useMainStore();
const phone = ref('');
const code = ref('');
const password = ref('');
const timer = ref(null);
const Countdown = ref(60);

const islook = ref(false);
const phoneLose = ref(false);
const codeLose = ref(false);
const passLose = ref(false);
const warn_tip = ref('');
const error_tip = ref('');

const editPass = debounce(() => {
  if (!isoK.value) return;
  error_tip.value = '';
  Http.post({
    url: '/yp_admin/resetPass',
    data: {
      phone: phone.value,
      code: code.value,
      password: password.value,
    },
  }).then((res) => {
    if (res.code !== 200) return (error_tip.value = res.msg);
  });
}, 500);

const getCode = () => {
  if (timer.value) return;
  const result = verify_phone();
  if (!result) return;
  const resultCode = sendCode(phone.value);
  if (!resultCode) return;
  timer.value = setInterval(() => {
    Countdown.value--;
    if (Countdown.value <= 0) {
      clearInterval(timer.value);
      Countdown.value = 60;
      timer.value = null;
    }
  }, 1000);
};

const changeLookPass = () => {
  islook.value = !islook.value;
};

const isoK = computed(() => {
  return phone.value && code.value && password.value;
});

const verify_phone = () => {
  if (!phone.value) {
    phoneLose.value = true;
    warn_tip.value = '请输入手机号码';
    return false;
  }
  if (phone.value && !validatePhone(phone.value)) {
    phoneLose.value = true;
    warn_tip.value = '请输入正确的手机号码';
    return false;
  }
  phoneLose.value = false;
  return true;
};
const verify_pass = () => {
  if (!password.value) {
    passLose.value = true;
    warn_tip.value = '请输入新的密码';
    return false;
  }
  if (password.value.length < 6 || password.value.length > 16) {
    passLose.value = true;
    warn_tip.value = '设置新密码在（6-16位）';
    return false;
  }
  passLose.value = false;
  return true;
};
const codesturt = computed(() => {
  if (phone.value && validatePhone(phone.value)) return true;
});

const codeText = computed(() => {
  if (!timer.value) return '获取验证码';
  return `重新获取(${Countdown.value})`;
});

onBeforeUnmount(() => {
  clearInterval(timer.value);
  Countdown.value = 60;
  timer.value = null;
});
</script>

<style scoped lang="scss">
.Wrapper {
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  background-color: #f2f3f5;

  .content {
    width: 550px;

    .PassBox {
      width: 550px;
      height: 566px;
      padding: 50px 56px 60px;
      background-color: #ffffff;
      border-radius: 6px;
      position: relative;
      display: flex;
      flex-direction: column;

      .title {
        color: #000;
        font-size: 26px;
        font-weight: 500;
      }

      .passForm {
        width: 100%;
        margin-top: 30px;

        .list {
          width: 100%;
          height: 48px;
          display: flex;
          align-items: center;
          margin-top: 30px;
          position: relative;

          .warn_tip {
            position: absolute;
            bottom: -24px;
            right: 0;
            color: $theme-color;
            font-size: 14px;
            vertical-align: baseline;
            box-sizing: border-box;
          }

          .listNum {
            width: 140px;
            height: 100%;
            color: #333;
            font-size: 16px;
            display: flex;
            align-items: center;
            border-bottom: 1px solid #dcdee0;
            margin-right: 20px;
          }

          .listInput {
            flex: 1;
            height: 100%;
            position: relative;

            .inputTxt {
              width: 100%;
              height: 100%;
              color: #333;
              font-size: 16px;
              border-bottom: 1px solid #dcdee0;
            }

            .sendCode {
              color: #969799;
              cursor: not-allowed;
              font-size: 16px;
              position: absolute;
              right: 0;
              top: 50%;
              transform: translateY(-50%);
              user-select: none;
            }

            .codesturt {
              cursor: pointer;
            }

            .islook {
              font-size: 18px;
              color: #ccc;
              cursor: pointer;
              position: absolute;
              right: 0;
              top: 50%;
              transform: translateY(-50%);
            }
          }
        }

        .error_tip {
          width: 100%;
          height: 50px;
          text-align: right;
          padding-top: 24px;
          color: $theme-color;
          font-size: 14px;
        }

        .submit {
          width: 100%;
          height: 48px;
          background-color: #f7f7f7;
          display: flex;
          justify-content: center;
          align-items: center;
          font-size: 18px;
          margin-top: 40px;
          color: #ccc;
          cursor: not-allowed;
        }

        .btn_primary_agree {
          background-color: $color_155;
          color: #fff;
          opacity: 1;
          cursor: pointer;
        }
      }
    }

    .toLogin {
      width: 100%;
      margin-top: 20px;
      display: flex;
      align-items: center;
      justify-content: flex-end;
      font-size: 16px;

      .havaAcc {
        margin-right: 10px;
        color: #969799;
      }

      .Tos {
        color: #155bd4;
      }
    }
  }
}

input::placeholder {
  color: #ccc;
  font-family: inherit !important;
  pointer-events: none;
  -webkit-appearance: none;
  appearance: none;
}

.inputTxt:focus {
  border-bottom: 1px solid #155bd4 !important;
}

.Warn {
  border-bottom: 1px solid $theme-color !important;
}
</style>
